<template>
  <div class="meeting-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>会议详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="会议ID">1</el-descriptions-item>
            <el-descriptions-item label="会议主题">季度工作总结会议</el-descriptions-item>
            <el-descriptions-item label="主持人">张经理</el-descriptions-item>
            <el-descriptions-item label="会议时间">2023-04-15 14:00:00</el-descriptions-item>
            <el-descriptions-item label="会议地点">会议室A</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag type="success">已完成</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="参会人员">张三、李四、王五、赵六</el-descriptions-item>
            <el-descriptions-item label="会议纪要">
              本次会议主要总结了第一季度的工作成果，分析了存在的问题，并制定了第二季度的工作计划。
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="音频文件" name="audio">
          <el-table :data="audioFiles" style="width: 100%">
            <el-table-column prop="name" label="文件名" />
            <el-table-column prop="size" label="文件大小" width="120" />
            <el-table-column prop="duration" label="时长" width="120" />
            <el-table-column prop="uploadTime" label="上传时间" width="180" />
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button size="small" type="primary">播放</el-button>
                <el-button size="small">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="分析报告" name="report">
          <div class="report-content">
            <h3>会议分析报告</h3>

            <div class="report-section">
              <h4>关键词提取</h4>
              <el-tag v-for="keyword in keywords" :key="keyword" style="margin: 5px;">
                {{ keyword }}
              </el-tag>
            </div>

            <div class="report-section">
              <h4>情感分析</h4>
              <el-progress :percentage="75" status="success">积极</el-progress>
              <el-progress :percentage="20" status="warning">中性</el-progress>
              <el-progress :percentage="5" status="exception">消极</el-progress>
            </div>

            <div class="report-section">
              <h4>主要内容摘要</h4>
              <ul>
                <li>张经理总结了第一季度销售业绩，同比增长15%</li>
                <li>李四汇报了技术部门的项目进展</li>
                <li>王五提出了第二季度的市场推广计划</li>
                <li>赵六对当前存在的问题进行了分析并提出改进建议</li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'MeetingDetail',
  setup() {
    const router = useRouter()
    const activeTab = ref('basic')

    // 模拟音频文件数据
    const audioFiles = ref([
      {
        name: 'meeting_20230415_part1.mp3',
        size: '15.2MB',
        duration: '45:30',
        uploadTime: '2023-04-15 16:30:00'
      },
      {
        name: 'meeting_20230415_part2.mp3',
        size: '12.8MB',
        duration: '38:15',
        uploadTime: '2023-04-15 16:35:00'
      }
    ])

    // 模拟关键词数据
    const keywords = ref([
      '第一季度', '销售业绩', '同比增长', '项目进展',
      '市场推广', '问题分析', '改进建议', '第二季度计划'
    ])

    const goBack = () => {
      router.go(-1)
    }

    return {
      activeTab,
      audioFiles,
      keywords,
      goBack
    }
  }
}
</script>

<style scoped>
.meeting-detail-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-content {
  padding: 20px 0;
}

.report-section {
  margin-bottom: 30px;
}

.report-section h4 {
  margin-bottom: 15px;
}

.report-section ul {
  padding-left: 20px;
}

.report-section ul li {
  margin-bottom: 10px;
}
</style>